<!-- 应用中心 -->
<script setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useListStore } from '@/stores/index'
import router from '@/router'

// 搜索框的值
const inputValue = ref('')

// 列表数据
const listStore = useListStore()

// 搜索
const serach = () => {
  listStore.searchList(inputValue.value)
}

// 刷新
const flush = () => {
  router.go(0)
}
</script>

<template>
  <div class="app-layout">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-card class="card-header">
          <el-input
            v-model="inputValue"
            :suffix-icon="Search"
            class="input-header"
            placeholder="搜索"
            @keyup.enter="serach"
          />
          <div class="refresh-header">
            <el-icon><Refresh /></el-icon>
            <span @click="flush">刷新</span>
          </div>
        </el-card>
      </el-header>

      <!-- 主体 -->
      <el-main class="main-body">
        <el-card>
          <h3>办公教学</h3>
          <ul class="list-teacher">
            <li v-for="item in listStore.bgjxList" :key="item.id" @click="li">
              <img :src="item.icons" style="width: 60px; height: 60px; margin-right: 0.625rem" />{{
                item.title
              }}
            </li>
          </ul>
        </el-card>
        <el-card>
          <h3>教学监控</h3>
          <ul class="list-monitor">
            <li v-for="item in listStore.jxjkList" :key="item.id">
              <img :src="item.icons" style="width: 60px; height: 60px; margin-right: 0.625rem" />{{
                item.title
              }}
            </li>
          </ul>
        </el-card>
        <el-card>
          <h3>教学数据分析</h3>
          <ul class="list-data">
            <li v-for="item in listStore.jxsjfxList" :key="item.id">
              <img :src="item.icons" style="width: 60px; height: 60px; margin-right: 0.625rem" />{{
                item.title
              }}
            </li>
          </ul>
        </el-card>
        <el-card>
          <h3>学生评价</h3>
          <ul class="list-commont">
            <li v-for="item in listStore.xspjList" :key="item.id">
              <img :src="item.icons" style="width: 60px; height: 60px; margin-right: 0.625rem" />{{
                item.title
              }}
            </li>
          </ul>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
// 头部卡片
.card-header {
  box-shadow: unset;

  // 输入框
  .input-header {
    width: 200px;
    :deep(.el-input__wrapper) {
      border-radius: 3.125rem;
    }
  }

  // 刷新
  .refresh-header {
    float: right;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    gap: 0.3125rem;
    position: relative;
    top: 5px;
    font-size: 0.9375rem;
  }
}

// 主体卡片
.main-body {
  margin-top: 0.8125rem;

  el-card {
    box-shadow: unset;
  }

  // 卡片之间的距离
  .el-card.is-always-shadow {
    margin-top: 1.25rem;
  }

  .list-teacher,
  .list-monitor,
  .list-data,
  .list-commont {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    padding: 0 1.25rem;
    margin: 3.125rem;
    li {
      border: 0.0625rem solid #f7f8fa;
      background: #f7f8fa;
      height: 7.5rem;
      border-radius: 0.625rem;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &:hover {
        background: #68beb1;
      }
    }
  }

  .list-commont {
    li {
      height: 6.25rem;
    }
  }

  .list-data {
    li {
      height: 6.25rem;
    }
  }
}
</style>
